<template>
  <div class="reason">
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/layout/layoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账户信息</el-breadcrumb-item>
            <el-breadcrumb-item>资金流动</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header">
          <el-input @change="search" v-model="input" placeholder="根据编号、消息查询"></el-input>
          <el-button type="primary">查询</el-button>
        </div>
        <!-- 内容展示区域 -->
        <div class="wrapper">
          <el-table :data="tableData" style="width: 100%" border stripe height="700">
              <el-table-column prop="id" label="id" width="80"></el-table-column>
              <el-table-column prop="moneychange" label="消息管理"></el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleClick(scope.row)">查看</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
          </el-table>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name:'UsermoneyChange',
        data() {
            return {
                input:'',
                tableData: [],
                allData:[]
            }
        },
        created() {
            this.getSendback()
        },
        methods: {
            getSendback(){
              axios.get("http://localhost:8080/api/getMoneyChange/getMoneyChangelist",{
                params:{
                  userId:localStorage.getItem('Token')
                }
              }).then(
                res=>{
                    this.allData = res.data
                    this.tableData = this.allData
                    console.log("999",res)
                    console.log(this.tableData)
                },
                error=>{
                  console.log("88",error.message)
                }
              )
            },
            handleClick(){

            },
            handleDelete(){

            },
            search(val){
              console.log("搜索了----",val,this.allData[0].userId)
              this.tableData = []
              if(val == ' '){
                this.tableData = this.allData
              }else{
                for(var i=0;i<this.allData.length;i++){
                  if(this.allData[i].moneychange.indexOf(val) !==-1||this.allData[i].id==val){
                    this.tableData.push(this.allData[i])
                  }
                }
                if(this.tableData == ''){
                  alert("未找到你想要搜索的竞拍商品")
                }
              }
              console.log("查询结果为",this.tableData)
            }
        },
    }
</script>

<style lang="less" scoped>
.reason {
  margin: 20px;
}
.title{
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}
.header {
  display: flex;
  margin-bottom: 10px;
  button {
    margin-left: 20px;
  }
}
</style>